<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>信息管理系统</title>  
    <link rel="stylesheet" href="styles.css">  
   
</head>  
<style>
        body {
            font-family: Arial;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

	       h1 {
	       	font-family:cursive;
		    text-align: center;
		    margin-top: 20px;
		   
		}

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        @media (max-width: 768px) {
            table {
                width: 100%;
            }
        }
    </style>
<body>  
    <h1>用户信息</h1>  
    <table id="user-table">  
        <thead>  
            <tr>  
                <th>用户名</th>  
                <th>专业</th>  
                <th>年级</th>  
                <th>班级</th>  
                <th>联系方式</th> 
                <th>专业班级</th>
                <th>家庭住址</th>
                <th>籍贯</th>
            </tr>  
        </thead>  
        <tbody>  
            <!-- 用户信息将在这里动态生成 -->  
        </tbody>  
    </table>   
</body>
  
<script type="text/javascript">
//假设的用户信息数组  
	const userData = [     
    { username: '池楣', major: '软件工程', grade: '2022', class: '1班', contact: '12345678901',专业班级: '软件（3+2）2023级1班',家庭住址: '某省某市某区某路某号',籍贯: '某省某市'},   
    { username: '朱珠', major: '软件工程', grade: '2022', class: '1班', contact: '12345678901' ,专业班级: '软件（3+2）2023级1班',家庭住址: '某省某市某区某路某号',籍贯: '某省某市'},    
    { username: '周到', major: '软件工程', grade: '2022', class: '1班', contact: '12345678901' ,专业班级: '软件（3+2）2023级1班',家庭住址: '某省某市某区某路某号',籍贯: '某省某市'},    
    // ... 可以添加更多用户信息    
];  
	  
	// 获取表格的tbody元素  
	const tableBody = document.querySelector('#user-table tbody');  
	  
	// 遍历用户数据并创建表格行  
	userData.forEach(user => {  
	    const row = document.createElement('tr');  
	    const cells = [  
	        document.createElement('td'),  
	        document.createElement('td'),  
	        document.createElement('td'),  
	        document.createElement('td'),  
	        document.createElement('td'),  
	        document.createElement('td'), 
	        document.createElement('td'), 
	        document.createElement('td')
	    ];  
	  
	    cells.forEach((cell, index) => {  
	        cell.textContent = user[Object.keys(user)[index]];  
	        row.appendChild(cell);  
	    });  
	  
	    tableBody.appendChild(row);  
	});
</script>
</html>